<template>
    <div class="markdown">
        <h1>布局</h1>
        <a-tabs default-active-key="1" :animated="false">
            <a-tab-pane key="1" tab="初始布局">
                <MdPreview :show="false" desName="初始布局" :val="demo1">
                    <template slot="code">
                        <Layout1 />
                    </template>
                    <template slot="des">
                        <p><span>说明：</span>1、需要安装vue-grid-layout插件，执行</p>
                        <pre v-highlight><code>npm install vue-grid-layout --save</code></pre>
                        <p>2、main.js全局引入</p>
                        <pre v-highlight><code>import VisGridLayout from '@/components/visGridLayout.vue'
Vue.component('VisGridLayout',VisGridLayout)</code></pre>
                        <p>3、官方文档 <a href="https://jbaysolutions.github.io/vue-grid-layout/zh/" target="_blank">https://jbaysolutions.github.io/vue-grid-layout/zh/</a></p>
                        <p><span>4、组件下载</span></p>
                        <ul>
                            <li><a :href="`${baseUrl}/static/layout/visGridLayout.vue`" download="visGridLayout.vue">visGridLayout.vue</a></li>
                        </ul>
                    </template>
                </MdPreview>
            </a-tab-pane>
            <a-tab-pane key="2" tab="示例">
                <MdPreview :show="false" desName="示例">
                    <template slot="code">
                        <Layout2 />
                    </template>
                </MdPreview>
            </a-tab-pane>
        </a-tabs>
        <h2>API</h2>
        <h3>VisGridLayout</h3>
        <table>
            <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>默认值</th>
            </tr>
            <tr>
                <td>layout</td>
                <td>这是栅格的初始布局。数据源。值必须为 Array，其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem。</td>
                <td>Array</td>
                <td>[]</td>
            </tr>
            <tr>
                <td>static</td>
                <td>标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。</td>
                <td>Boolean</td>
                <td>false</td>
            </tr>
            <tr>
                <td>slot</td>
                <td>map 是全屏背景地图插槽。i 是根据layout数组中的数据项 i 生成的 name 属性值</td>
                <td>'map' / 'i（String）'</td>
                <td></td>
            </tr>
            <tr>
                <td>width</td>
                <td>容器宽度</td>
                <td>String</td>
                <td>'1920px'</td>
            </tr>
            <tr>
                <td>height</td>
                <td>容器高度</td>
                <td>String</td>
                <td>'1080px'</td>
            </tr>
        </table>
        <h3>GridLayout</h3>
        <table>
            <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>默认值</th>
                <th>必选（required）</th>
            </tr>
            <tr>
                <td>layout</td>
                <td>这是栅格的初始布局。数据源。值必须为 Array，其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem。</td>
                <td>Array</td>
                <td>[]</td>
                <td>true</td>
            </tr>
            <tr>
                <td>responsiveLayouts</td>
                <td>如果 responsive 设置为 true，该配置将作为栅格中每个断点的初始布局。键值是断点名称，每项的值都是类似 layout 属性定义的数据结构，值必须为 Array，其数据项为 Object。例如： {lg: [layout items], md: [layout items]}。需要注意的是，在创建栅格布局后设置该属性无效。 在创建GridLayout之后设置prop无效。</td>
                <td>Object</td>
                <td>{}</td>
                <td>false</td>
            </tr>
            <tr>
                <td>colNum</td>
                <td>定义栅格系统的列数，其值需为自然数。</td>
                <td>Number</td>
                <td>12</td>
                <td>false</td>
            </tr>
            <tr>
                <td>rowHeight</td>
                <td>每行的高度，单位像素。</td>
                <td>Number</td>
                <td>150</td>
                <td>false</td>
            </tr>
            <tr>
                <td>maxRows</td>
                <td>定义最大行数。</td>
                <td>Number</td>
                <td>Infinity</td>
                <td>false</td>
            </tr>
            <tr>
                <td>margin</td>
                <td>定义栅格中的元素边距。值必须是包含两个 Number的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。</td>
                <td>Array</td>
                <td>[10, 10]</td>
                <td>false</td>
            </tr>
            <tr>
                <td>isDraggable</td>
                <td>标识栅格中的元素是否可拖拽。</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
            <tr>
                <td>isResizable</td>
                <td>标识栅格中的元素是否可调整大小。</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
            <tr>
                <td>isMirrored</td>
                <td>标识栅格中的元素是否可镜像反转。</td>
                <td>Boolean</td>
                <td>false</td>
                <td>false</td>
            </tr>
            <tr>
                <td>autoSize</td>
                <td>标识容器是否自动调整大小。</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
            <tr>
                <td>verticalCompact</td>
                <td>标识布局是否垂直压缩。</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
            <tr>
                <td>preventCollision</td>
                <td>防止碰撞属性，值设置为ture时，栅格只能拖动至空白处。</td>
                <td>Boolean</td>
                <td>false</td>
                <td>false</td>
            </tr>
            <tr>
                <td>useCssTransforms</td>
                <td>标识是否使用CSS属性 transition-property: transform;。</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
            <tr>
                <td>responsive</td>
                <td>标识布局是否为响应式。</td>
                <td>Boolean</td>
                <td>false</td>
                <td>false</td>
            </tr>
            <tr>
                <td>breakpoints</td>
                <td>为响应式布局设置断点。</td>
                <td>Object</td>
                <td>{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }</td>
                <td>false</td>
            </tr>
            <tr>
                <td>cols</td>
                <td>设置每个断点对应的列数。</td>
                <td>Object</td>
                <td>{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }</td>
                <td>false</td>
            </tr>
            <tr>
                <td>useStyleCursor</td>
                <td>标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 false也许可以缓解布局问题。 此属性无效</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
            <tr>
                <td>useStyleCursor</td>
                <td>标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 false也许可以缓解布局问题。 此属性无效</td>
                <td>Boolean</td>
                <td>true</td>
                <td>false</td>
            </tr>
        </table>
        <h3>GridItem</h3>
        <table>
            <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>默认值</th>
                <th>必选（required）</th>
            </tr>
            <tr>
                <td>i</td>
                <td>栅格中元素的ID。</td>
                <td>String</td>
                <td></td>
                <td>true</td>
            </tr>
            <tr>
                <td>x</td>
                <td>标识栅格元素位于第几列，需为自然数。</td>
                <td>Number</td>
                <td></td>
                <td>true</td>
            </tr>
            <tr>
                <td>y</td>
                <td>标识栅格元素位于第几行，需为自然数。</td>
                <td>Number</td>
                <td></td>
                <td>true</td>
            </tr>
            <tr>
                <td>w</td>
                <td>标识栅格元素的初始宽度，值为colWidth的倍数。</td>
                <td>Number</td>
                <td></td>
                <td>true</td>
            </tr>
            <tr>
                <td>h</td>
                <td>标识栅格元素的初始高度，值为rowHeight的倍数。</td>
                <td>Number</td>
                <td></td>
                <td>true</td>
            </tr>
            <tr>
                <td>minW</td>
                <td>栅格元素的最小宽度，值为colWidth的倍数。如果w小于minW，则minW的值会被w覆盖。</td>
                <td>Number</td>
                <td>1</td>
                <td>false</td>
            </tr>
            <tr>
                <td>minH</td>
                <td>栅格元素的最小高度，值为rowHeight的倍数。如果h小于minH，则minH的值会被h覆盖。</td>
                <td>Number</td>
                <td>1</td>
                <td>false</td>
            </tr>
            <tr>
                <td>maxW</td>
                <td>栅格元素的最大宽度，值为colWidth的倍数。如果w大于maxW，则maxW的值会被w覆盖。</td>
                <td>Number</td>
                <td>Infinity</td>
                <td>false</td>
            </tr>
            <tr>
                <td>maxH</td>
                <td>栅格元素的最大高度，值为rowHeight的倍数。如果h大于maxH，则maxH的值会被h覆盖。</td>
                <td>Number</td>
                <td>Infinity</td>
                <td>false</td>
            </tr>
            <tr>
                <td>isDraggable</td>
                <td>标识栅格元素是否可拖拽。如果值为null则取决于父容器。</td>
                <td>Boolean</td>
                <td>null</td>
                <td>false</td>
            </tr>
            <tr>
                <td>isResizable</td>
                <td>标识栅格元素是否可调整大小。如果值为null则取决于父容器。</td>
                <td>Boolean</td>
                <td>null</td>
                <td>false</td>
            </tr>
            <tr>
                <td>static</td>
                <td>标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。</td>
                <td>Boolean</td>
                <td>false</td>
                <td>false</td>
            </tr>
            <tr>
                <td>dragIgnoreFrom</td>
                <td>标识栅格元素中哪些子元素无法触发拖拽事件，值为css-like选择器。</td>
                <td>String</td>
                <td>'a, button'</td>
                <td>false</td>
            </tr>
            <tr>
                <td>dragAllowFrom</td>
                <td>标识栅格元素中哪些子元素可以触发拖拽事件，值为css-like选择器。如果值为null则表示所有子元素（dragIgnoreFrom的除外）。</td>
                <td>String</td>
                <td>null</td>
                <td>false</td>
            </tr>
            <tr>
                <td>resizeIgnoreFrom</td>
                <td>标识栅格元素中哪些子元素无法触发调整大小的事件，值为css-like选择器。</td>
                <td>String</td>
                <td>'a, button'</td>
                <td>false</td>
            </tr>
        </table>
    </div>
</template>

<script>
import Layout1 from '@/views/comps/components/layout1'
import Layout2 from '@/views/comps/components/layout2'

export default {
    components: {
        Layout1,
        Layout2,
    },
    data() {
        return {
            demo1: `
<template>
    <grid-layout
        :layout.sync="layout"
        :col-num="192"
        :row-height="10"
        :is-draggable="true"
        :is-resizable="true"
        :is-mirrored="false"
        :vertical-compact="false"
        :margin="[0, 0]"
        :use-css-transforms="true"
        :prevent-collision="true"
        style="margin: 0 auto;"
        :style="{width: width, height: height}"
      >
        <div class="map" v-if="$slots.map">
            <slot name="map"></slot>
        </div>
        <grid-item
          v-for="item in layout"
          
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          :static="static"
          :class="static ? 'staticNone':''"
        >
            <div class="name" v-if="!static">{{item.i}}（x：{{item.x}}，y：{{item.y}}，w：{{item.w*10}}，h：{{item.h*10}}）</div>
            <div class="remove" @click="dele(item.i)" v-if="!static"><a-icon type="close" /></div>
            <slot :name="item.i"></slot>
        </grid-item>
    </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout";

export default {
    components: {
        GridLayout,
        GridItem,
    },
    props: {
        width: {
            type: String,
            default: '1920px'
        },
        height: {
            type: String,
            default: '1080px'
        },
        static: {
            type: Boolean,
            default: true
        },
        layout: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            layout: []
        }
    },
    methods: {
        add() {
            this.layout.push({
                x: 0,
                y: 10,
                w: 10,
                h: 10,
                i: this.layout.length + 1,
            });
        },
        dele(i) {
            this.layout.splice(
                this.layout.findIndex((item) => item.i === i),
                1
            );
        },
    }
}
<\/script>

<style lang="less" scoped>
.map{
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  z-index: 1;
}

.vue-grid-layout {
  background: #000;
}
.vue-grid-item:not(.vue-grid-placeholder) {
  background: rgba(204, 204, 204, .1);
  border: 1px solid #fff;
  transition:none;
  z-index: 2;
}
.staticNone{
    background: none !important;
    border: none !important;
}
.vue-grid-item .resizing {
  opacity: 0.9;
}
.vue-grid-item .static {
  background: #ccc;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
}
.vue-grid-item .no-drag {
  height: 100%;
  width: 100%;
}
.vue-grid-item .minMax {
  font-size: 12px;
}
.vue-grid-item .add {
  cursor: pointer;
}
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
    no-repeat #fff;
  background-position: bottom right;
  padding: 0 8px 8px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

/deep/.vue-grid-item>.vue-resizable-handle{
    background-color: #fff;
    width: 15px;
    height: 15px;
}

.vue-grid-item .name{
    position: absolute;
    left: 4px;
    top: 0;
    z-index: 9999;
}

.vue-grid-item .remove {
    position: absolute;
    right: 4px;
    top: 0;
    cursor: pointer;
    z-index: 9999;
}
</style>
            `
        }
    }
}
</script>

<style>

</style>